<template>
  <div class="system-title2" :style="{ marginTop: marginTop + 'px' , marginBottom: marginBottom + 'px' }">
    <p :style="{ color: titleColor, fontSize: fontSize + 'px' }"><slot name="title">{{title}}</slot></p>
    <span :style="{ width: width + 'px', height: height + 'px', background:backgColor}"></span>
  </div>
</template>

<script>
export default {
  name: "InPortalMobileWebGlobalTitle",
    props:{
        title:{
            type: String,
            default: "标题组件",
        },
        fontSize:{
            type: String,
            default: 30,
        },
        // 标题颜色
        titleColor:{
            type: String,
            default: '#000',
        },
        // 背景颜色
        backgColor:{
            type: String,
            default: '#FFECCC',
        },
        // 背景阴影的宽和高
        width:{
            type: String,
            default: 160,
        },
        height:{
            type: Number,
            default: 20,
        },
        // 上下边距
        marginTop:{
            type: Number,
            default: 25,
        },
        marginBottom:{
            type: Number,
            default: 25,
        }
    },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.system-title2 {
  width: 375px;
    margin: 10px 0 0 0;
  > p:nth-child(1) {
    font-size: 40px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #424242;
    opacity: 1;
  }
  > span {
    margin: -14px 0 0 4px;
    display: block;
    opacity: 1;
    border-radius: 16px;
  }
}
</style>
